<template>
	<view>
		<view class="con">
			<view class="box">
				<view class="">
					<view class="box__t">
						我的余额
					</view>
					<view class="box__num">
						1200.00
					</view>
				</view>
				<image src="/static/personal/qianbao.png" class="box__icon" mode=""></image>
			</view>
			<view class="b">
				<view class="u-flex u-flex-y-center u-flex-between">
					<view class="b__title">
						充值金额
					</view>
					
				</view>
				<view class="b__i">
					<view class="" style="margin-bottom: 10rpx;">
						￥
					</view> <input type="number" class="b__inp" v-model="num" />
				</view>
				<u-radio-group v-model="value" iconPlacement="right" placement='column'>
					<u-radio activeColor="#FF4D30" :customStyle="{width:'100%',marginTop:'47rpx'}"
						v-for="(item, index) in radiolist1" :key="index" :name="item.name" @change="radioChange">
						<view class="b__pay">
							<image :src="'/static/personal/'+item.icon+'.png'" class="b__pay__icon" mode=""></image>
							<view class="b__pay__label">
								{{item.name}}
							</view>
						</view>
					</u-radio>
				</u-radio-group>
			</view>
			<view class="b">
				<view class="b__title" style="margin-bottom: 30rpx;">
					温馨提示
				</view>
				<view class="b__text">
					1、充值金额实时到账，请刷新查看
				</view>
				<view class="b__text">
					 2、刷新未到账请联系平台客服
				</view>
				<u-button text="确认充值" color="#E3432D" size="largin" customStyle="height:95rpx;border-radius:20rpx;font-size:30rpx;margin-top:40rpx;"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '微信充值',
				radiolist1: [{
					name: '微信充值',
					icon: 'wx'
				}],
				num: 1000
			};
		}
	}
</script>

<style lang="scss">
	.con {
		padding: 30rpx;

		.box {
			padding: 0 46rpx 0 37rpx;
			background-color: #fde7e4;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 182rpx;
			border-radius: 30rpx 30rpx 30rpx 30rpx;

			&__t {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #000000;
				line-height: 24rpx;
			}

			&__num {
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 68rpx;
				color: #000000;
				line-height: 49rpx;
				margin-top: 30rpx;
			}

			&__icon {
				width: 152rpx;
				height: 131rpx;
			}
		}
	}

	.b {
		padding: 40rpx 20rpx 47rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin-top: 27rpx;

		&__title {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #1E1E1E;
			line-height: 27rpx;
		}

		&__q {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #E3432D;
			line-height: 24rpx;
		}

		&__i {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 48rpx;
			color: #F35051;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #F3F3F3;
			padding: 20rpx 0 10rpx;
		}

		&__inp {
			font-family: DINNextLTPro;
			font-weight: 500;
			font-size: 72rpx;
			color: #F35051;
		}

		&__pay {

			display: flex;
			align-items: center;

			&__icon {
				width: 45rpx;
				height: 45rpx;
				margin-right: 20rpx;
			}

			&__label {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 27rpx;
				color: #010000;
				line-height: 27rpx;
				flex: 1;
			}
		}
		&__text{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #1E1E1E;
			line-height: 36rpx;
		}
	}
</style>